ref

ref 接受一个 inner value,然后返回一个响应式且可变的ref对象，这个ref对象需要使用.value来访问其inner value。

  1. const foo = ref('foo')
  2. console.log(foo.value) // 'foo'
  4. foo.value = 'bar'
  5. console.log(foo.value) // 'bar'
  • 示例
  1. <template>
  2.   <div>
  3.     <button @click="increase">被点击了{{count}}次</button>
  4.   </div>
  5. </template>
  7. <script>
  8.   import { createComponent, ref } from '@vue/composition-api'
  9.   export default createComponent({
  10.     setup() {
  11.       // 声明一个名为count，初始值为0的ref对象
  12.       const count = ref(0)
  14.       const increase = () => {
  15.         // 每次点击按钮count值+1，特别需注意的是，需要'.value',才能访问到count的inner value。
  16.         count.value++
  17.       }
  18.       return {
  19.         count,
  20.         increase
  21.       }
  22.     }
  23.   })
  24. </script>

当在 template 或者 render 函数 中访问ref时，它的inner value会被自动解包，不需要在 template 中添加.value。

  • 在 Reactive 对象里存取

当一个ref被作为reactive 对象的属性时被存取或者变更时，它会自动的解包inner value，可以像正常的属性一样去使用它。

  1. const count = ref(0)
  2. const state = reactive({
  3.   count
  4. })
  6. // 访问count
  7. console.log(state.count) // 0
  9. // 变更count
  10. state.count = 1
  11. console.log(count.value) // 1
  • 注意，如果一个新的 ref 对象被分配给一个带有 ref 的属性，它将会替换旧的 ref。
  1. ....
  2. const otherCount = ref(2)
  4. //旧的count，被otherCount替代，
  5. state.count = otherCount
  6. console.log(state.count) // 2
  7. console.log(count.value) // 1

你真棒，到了这里，你已经掌握了利用reactive和ref来给项目创建响应式的对象，累了的话，喝杯茶，在继续战斗吧。

  • 注：如对你有帮助，点 star 吧，感谢你的支持和鼓励，为我持续创作提供动力。